<template>
<div class="toCenter">
  11
</div>
  <div class="thin">

  </div>
  <div>
    222
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.toCenter{
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  line-height: 100px;
  animation-name: animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes animation {
  0%{
    width:100px
  }
  10%{
    width:150px
  }
  20%{
    width:200px
  }
  50%{
    width:300px
  }
  100%{
    width:400px
  }
}
.thin{
  height: 1px;
  background: #000;
  transform: scaleX(0.1);
  transform-origin: 0;
}
</style>